import React, { Component } from "react";

import FilterFooter from "../../../../components/FilterFooter";

import styles from "./index.module.css";

export default class FilterMore extends Component {
  state = {
    selectedValues: this.props.defaultValues
  };
  // 标签点击事件
  onTagClick(val) {
    const { selectedValues } = this.state;
    const newSelectedValues = [...selectedValues];
    if (selectedValues.indexOf(val) <= -1) {
      newSelectedValues.push(val);
    } else {
      const index = newSelectedValues.findIndex(item => item === val);
      newSelectedValues.splice(index, 1);
    }
    this.setState(() => {
      return {
        selectedValues: newSelectedValues
      };
    });
  }
  // 渲染标签
  renderFilters(data) {
    const { selectedValues } = this.state;
    // 高亮类名： styles.tagActive
    return data.map(item => {
      const isSelected = selectedValues.indexOf(item.value) > -1
      return (
        <span
          className={[styles.tag, isSelected ? styles.tagActive : ''].join(" ")}
          key={item.value}
          onClick={() => this.onTagClick(item.value)}
        >
          {item.label}
        </span>
      );
    });
  }
  // 点击清除按钮执行函数
  onCancel = () => {
    this.setState(()=>{
      return {
        selectedValues: []
      }
    })
  }
  // 点击确定按钮执行函数
  onOk = () => {
    const {type, onSave} = this.props
    onSave(type, this.state.selectedValues) 
  }
  render() {
    const {
      data: { characteristic, floor, oriented, roomType },
      onCancel,
      type
    } = this.props;
    return (
      <div className={styles.root}>
        {/* 遮罩层 */}
        <div className={styles.mask} onClick={() => onCancel(type)}/>

        {/* 条件内容 */}
        <div className={styles.tags}>
          <dl className={styles.dl}>
            <dt className={styles.dt}>户型</dt>
            <dd className={styles.dd}>{this.renderFilters(roomType)}</dd>

            <dt className={styles.dt}>朝向</dt>
            <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>

            <dt className={styles.dt}>楼层</dt>
            <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

            <dt className={styles.dt}>房屋亮点</dt>
            <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
          </dl>
        </div>

        {/* 底部按钮 */}
        <FilterFooter
          className={styles.footer}
          cancelText='清除'
          onCancel={this.onCancel}
          onOk={this.onOk}
        />
      </div>
    );
  }
}
